<template>
<div class="pad">
    <el-card shadow="hover" class="articleCard">
        <div>
            <el-link style="font-size: xx-large"
                     :underline="false"
                     :href="`/article?articleId=${articleId}`"
                     target="_blank">
                {{title}}
            </el-link>
        </div>
        <div>
            <el-text style="margin-right: auto">
                <el-icon><Timer /></el-icon>发表于{{postTime}}
            </el-text>
        </div>

        <div>
            <el-text style="margin-right: auto">
                <el-icon><User /></el-icon>{{userName}}
            </el-text>
        </div>
        <div>
            <el-text style="margin-right: auto">
                {{summary}}
            </el-text>
        </div>
        <div class="mod">
            <el-icon
                size="30"
                color="#000080"
                v-if="isTop"
            ><CaretTop/>
            </el-icon>
            <el-icon
                color="#ffd700"
                size="30"
                v-if="isElite"
            ><StarFilled /></el-icon>

        </div>
    </el-card>
</div>


</template>


<script setup>
import {CaretTop, StarFilled, Timer, User} from "@element-plus/icons-vue";
import {getWithToken} from "@/net/postAndGetMethodWithToken";
import {ref} from "vue";
const props = defineProps(["articleId","title","summary","postTime","isTop","isElite","uid"])

const userName = ref('')
getWithToken('/api/user/one?uid='+props.uid,(data,code,message)=>{
    userName.value = data.userName
})


</script>

<style>
.articleCard{
    width: 900px;
    height: 180px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    position: relative;
    opacity: 0.7;
}
.pad{
    padding: 10px;
}
.mod{
    height: 20px;
    width: 20px;
    /*background-color: #ff4949;*/
    position: absolute;
    right: 50px;
    top: 20px;
    display: flex;
    flex-direction: row;
}
</style>